<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>IGNORED</title>
</h:head>

<h:body>
	<ui:composition template="/WEB-INF/templates/MainLayout.xhtml">
		<ui:define name="windowTitle">Guide</ui:define>
		<ui:define name="content">
			<f:view contentType="text/html">
				<div class="slider-wrapper">
					<div class="slider guide-slider">
						<ui:repeat varStatus="stat" var="step"
							value="#{guidebean.guide.steps}">
							<div>
								<h1>#{guidebean.guide.title}</h1>
								<div class="col-lg-6 col-md-6 portfolio-item"
									style="text-align: left">
									<h1>Step # #{stat.index + 1}</h1>
									<ui:repeat var="line" value="#{step.lines}">
										<p>#{line.textTranslated}</p>
									</ui:repeat>
								</div>
								<div class="col-lg-6 col-md-6 portfolio-item">
									<ui:repeat var="images" value="#{step.media.data}">
										<img src="#{images.medium}" alt="" />
									</ui:repeat>
								</div>
							</div>
						</ui:repeat>
					</div>
				</div>
				<script type="text/javascript">
					$(function() {
						$('.guide-slider').AnySlider({
							easing : 'easeOutBounce',
							interval : 0,
							keyboardNav : false,
							speed : 1500
						});
					});
				</script>
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>
